<template>
  <main>
    <div v-if="isLoginForm" class="login-reg">
      <div class="logo">LOGO</div>
      <form id="log-form">
        <div class="form-group">
          <input v-model="logInfo.email" type="email" class="form-control" name="email" placeholder="邮箱">
        </div>
        <div class="form-group">
          <input v-model="logInfo.password" type="password" class="form-control" name="password" placeholder="密码">
        </div>
        <div class="form-group" style="text-align: center">
          <button v-on:click="upLog()" type="button" class="btn btn-primary">登录</button>
        </div>
      </form>
      <div class="change">
        <a href="" v-on:click.prevent="isLoginForm = !isLoginForm">注册</a>
        <a href="">忘记密码</a>
      </div>
    </div>
    <div v-else class="login-reg">
      <div class="logo">LOGO</div>
      <form id="reg-form">
        <div class="form-group">
          <input v-model="regInfo.email" type="email" name="email" class="form-control" placeholder="邮箱">
        </div>
        <div class="form-group">
          <input v-model="regInfo.userName" type="text" name="username" class="form-control" placeholder="用户名">
        </div>
        <div class="form-group">
          <input v-model="regInfo.password" type="password" name="password" class="form-control" placeholder="密码">
        </div>
        <div class="form-group">
          <input v-model="regInfo.password_repeat" type="password" name="password-repeat" class="form-control" placeholder="重复密码">
        </div>
        <div class="form-group" style="text-align: center">
          <button v-on:click="upReg()" type="button" class="btn btn-primary">注册</button>
        </div>
      </form>
      <div class="change">
        <a href="" v-on:click.prevent="isLoginForm = !isLoginForm">登录</a>
      </div>
    </div>
  </main>
</template>

<script>
  export default {
    name : 'loginReg',
    data() {
      return {
        isLoginForm: true,
        logInfo: {
          email: '',
          password: ''
        },
        regInfo: {
          email: '',
          userName: '',
          password: '',
          password_repeat: ''
        }
      }
    },
    methods: {
      upLog() {
        let router = this.$router;
        let store = this.$store;

        this.$axios.post(this.selfHost + '/api/login', {
          email: this.logInfo.email,
          password: this.logInfo.password,
        })
          .then(function (response) {
            router.push('home');
            store.dispatch('setUserInfo', response.data.user);
            store.dispatch('setToken', response.data.token);
          })
          .catch(function (error) {
            alert("登录失败！");
            console.log(error);
          });
      },
      upReg() {
        let router = this.$router;
        let store = this.$store;

        this.$axios.post(this.selfHost +  '/api/regin', {
          email: this.regInfo.email,
          username: this.regInfo.userName,
          password: this.regInfo.password,
          password_repeat: this.regInfo.password_repeat
        })
        .then(function (response) {
          router.push('home');
          store.dispatch('setUserInfo', response.data.user);
          store.dispatch('setToken', response.data.token);
          console.log(response);
        })
        .catch(function (error) {
          alert("注册失败！");
          console.log(error);
        });
      }
    }
  }
</script>

<style>
  main {
    display: flex;
    flex: 1;
  }
  .login-reg {
    width: 25%;
    margin: auto;
  }
  .logo {
    text-align: center;
    background-color: #D1E0E9;
    color: #7E9FC1;
    line-height: 12.5rem;
    width: 12.5rem;
    margin: 2rem auto;
  }
  .change {
    text-align: center;
  }
</style>
